cc-pocket · motion package
Video Stage 1.0
The 9:16 motion-graphics stage for cc-pocket's automated promo videos. The pipeline renders real app screens as an image sequence inside a phone shell; everything around that phone — typography, composition, background, motion — is this stage system. Designed like a title-safe broadcast package, dark only.
Board frame 540 × 960
Final render 1080 × 1920 · ×2
Aspect 9:16
Deterministic CSS/JS driven by t
One terracotta focal / frame
V1Stage anatomy & type system
The master frame. Layers bottom→top: background treatment → phone shell → 花字 kicker → 口播字幕 subline → brand chip. Platform safe areas are annotated in blue (values in final px). All numbers below are board px; multiply ×2 for the render.
V1Master frame · annotated
CC Pocket
手机接管，
不用提前开任何模式
锁屏时收到请求，抬手点一下就通过
TOP SAFE · 96px (48 board)
platform status / search
RIGHT · 72px (36)
action rail
BOTTOM SAFE · 168px (84 board) · caption + progress
brand chip
y 60 · h 38
kicker band
y 120→214
phone
w 264
centered X
slightly low
subline
bottom 96
花字 · kicker
中文优先的显示字体
fontNoto Sans SC / PingFang SC · 700
size44px board (88 final) · short lines 34px
line-height1.16 · max 2 lines · text-wrap balance
positioncentered, top-safe band · y 120–214, inset 32px
colorbase #ECEDEE, keyword #D97757
emphasis<em> keyword gets a highlighter chip: terracotta fill @ 20%, sits on the lower 46% of the glyph, radius 3px. Reads at feed size where a thin underline would vanish.
specimen — highlighter chip
人在地铁，电脑在家干活
口播字幕 · subline
一行安静的旁白字幕
font / weightNoto Sans SC · 400 (emphasis 500)
size22px board (44 final)
color#9BA1A6 · emphasis #ECEDEE
width / pos≤ 460px, centered · bottom 96 (just above bottom-safe)
ruleone line only · never competes with the kicker
Brand chip & phone shell
品牌角标 & 手机外壳
brand chipfavicon glyph + CC Pocket (mono 13px). Top-left, y 60 / x 28. Frosted dark pill (blur 10, bg #0E0F11 @ 55%) so it survives over any scene.
bezelradius 38px · border 1px #2A2E33 · pad 9px · screen radius 30px
width264px board → screen 544px tall
shadow0 44px 90px -44px #000 + faint terracotta rim glow (25%)
placementhorizontally centered, vertically slightly low (headroom for the kicker) · top 236
#0E0F11 base
#16181B surface
#2A2E33 hair
#D97757 focal
Background treatment
保持安静
glowsingle terracotta radial, rgba(217,119,87,.13), 760px, centered ~34% height, behind phone
structureone idea only — faint dot-grid, 26px pitch, white @ 4.5%, radial-masked to fade at edges
accent arcoptional single hairline ring @ 10% terracotta behind the phone
forbiddenno particles, no noise storms, no second hue, no gradient soup
V2Five stage variants · real app screens
One frame per screen the pipeline already renders, each carrying its production kicker copy. The done beat (人在地铁) shows the system push banner dropping over the shell top — styled as part of the stage kit.
V2·1Sessions listhandoff
CC Pocket
手机接管，
不用提前开任何模式
打开就在跑，不用先切开发者模式
V2·2Streaming chatdone beat · push
CC Pocket
人在地铁，
电脑在家干活
CC Pocketnow
修复 relay 断连 · 任务完成，24 项测试通过
干完了会推一条通知到你手机
V2·3Question cardit asks
CC Pocket
它问，我点
遇到岔路口，选一下就继续
V2·4Diff viewerreview
CC Pocket
改动一目了然
改了哪几行，手机上直接看
V2·5Usagecost
CC Pocket
用量花费，
明明白白
这个月花了多少，一眼到底
V3Non-phone scenes
Same stage rules (glow, grid, brand chip, kicker, subline) — the phone is swapped for a terminal, montage panels, or the end card.
V3·1Terminal scenecold open
CC Pocket
AI 干到一半，
我要出门了
桌面上跑着，可以先走
Terminal centered, no perspective (calm). Window 470px wide, radius 12, Mac chrome + terracotta glow rim. CLI streams the same relay fix the phone scenes reference — continuity across the cut.
V3·2Montage · 2 panelscaption swap
CC Pocket
一台手机，管好几台电脑
Fleet3 machines
studio-mbp
cc-pocket · relay
在哪都能切过去看
CC Pocket
你的机器，你的密钥
端到端加密直连
Apple 私有中继 · 无云端存储
密钥只在你的设备之间
开源 · 代码看得见
Two quick panels share one panel treatment (surface card, radius 20, 30px drop shadow). Only the caption swaps on the beat — panel content hard-cuts beneath a held frame.
V3·3End cardfreezes 2s · single CTA
CC Pocket
App Store 搜
CC Pocket
App Store 下载
github.com/cc-pocket · 开源
V4Motion spec sheet
Implementation is deterministic CSS/JS driven by t, so these exact numbers ship. Offsets in board px (×2 for final). All eases apply on [data-deck-active] and are disabled under prefers-reduced-motion — the base style is the visible end-state.
| Element | Enter offset | Duration | Easing | Delay (after cut) | Property |
|---|
| Brand chip角标 |
— (none) |
400ms |
ease-out |
0ms |
opacity 0→1 |
| 花字 kicker主标 |
+28px rise |
520ms |
cubic-bezier(.22,1,.36,1) |
120ms |
translateY + opacity |
| ↳ keyword chip花字高亮 |
wipe L→R |
240ms |
ease-out |
+320ms after line settles |
background-size 0→100% (chip grows over the word after it reads) |
| Phone shell手机 |
+40px rise · scale .96→1 |
640ms |
cubic-bezier(.16,1,.3,1) |
60ms |
transform + opacity |
| 口播字幕 subline字幕 |
+16px rise |
460ms |
cubic-bezier(.22,1,.36,1) |
380ms |
translateY + opacity |
| Terminal / panels终端 / 面板 |
+40px rise · scale .97→1 |
600ms |
cubic-bezier(.16,1,.3,1) |
60ms |
same envelope as phone shell |
Scene-to-scene cut
8 帧黑场过渡
styleDip-to-black, not hard cut — calm broadcast feel
length8 frames total (≈267ms @30fps)
shape4f fade-out → 4f fade-in, black held 0f between
timingmidpoint lands on the music beat
exceptionmontage caption swap = hard cut under a held panel
Push-banner drop
系统通知横幅
enter offset-120px (from above top-safe)
duration520ms
easingcubic-bezier(.22,1.4,.36,1) — slight overshoot settle
hold1600ms
exitrise out -120px, 360ms ease-in
positiontop 12 / inset 12, over shell — inside frame top-safe
Scene entrance timeline — one beat
0 ────────────────────────── 1400ms
kicker
keyword chip
phone / panels
type (chip · subline)
push banner